<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :shareForm="['forward', 'link']">
    <template #navbar>
      <cu-navbar :navPlaceholder="true" :navTitle="detail.title" navBgColor="rgba(255,255,255,1)">
        <!-- #ifdef APP-PLUS-->
        <template #right> <uv-icon name="more-dot-fill" color="#333" size="28" @click="appShared"></uv-icon> </template>
        <!-- #endif -->
      </cu-navbar>
    </template>
    <view :class="[`${prefixCls}-article-detail-container`]" :style="{ height: `calc(100vh - ${$Platform.navbar}px)` }">
      <view v-if="detail.is_link == 0">
        <view class="title">
          {{ detail.title }}
        </view>
        <view class="grey">
          <view class="editor">{{ detail.editor }}</view>
          <view class="time">{{ detail.show_time }}</view>
        </view>
        <view class="head_img" v-if="detail.head_img">
          <image :src="detail.head_img" alt="" />
        </view>
        <view class="parse">
          <uv-parse :content="detail.content" class="detail" :show-with-animation="true"></uv-parse>
        </view>
      </view>
      <view v-if="detail.is_link == 1">
        <web-view ref="webView" :src="detail.url"></web-view>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import share from '@/mixins/share'
import { mapActions } from 'vuex'
import { getArticleDetail } from './api'
export default {
  name: 'articleDetail',
  components: {},
  mixins: [share],
  props: {},
  data() {
    return {
      detail: {},
      id: '',
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    onSharePageConfig() {
      return this.$Platform.share.getShareInfo({
        title: this.detail?.share_title || this.detail?.title,
        image: this.detail?.share_img || this.detail?.image_src || CDN('/common/static/images/share/share_200x160.png'),
        desc: this.detail?.share_lan || this.detail?.subtitle,
        params: {
          page: '/pages/subpackage/article/detail',
          query: {
            id: this.id,
          },
        },
      })
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  async onLoad(options) {
    if (options.spm) {
      const { id = '' } = this.$Platform.share.decryptSpm(options.spm)
      this.id = id
    } else {
      this.id = options.id || ''
    }
    await this.getArticleDetail()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions('modal', ['SetShareModal']),
    getArticleDetail() {
      if (!this.id) return uni.$uv.toast('缺少参数id!')
      getArticleDetail({ id: this.id }).then((res) => {
        if (res.errcode == 0) {
          this.detail = res.data
        }
      })
    },
    appShared() {
      this.SetShareModal(true)
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('article-detail-container')} {
  padding: 0 30rpx 0;
  box-sizing: border-box;
  background: white;
  // min-height: 100vh;
  .title {
    font-size: 32rpx;
    font-weight: bold;
    padding-top: 56rpx;
  }
  .grey {
    @include flex;
    margin: 32rpx 0;
    .editor {
      margin-right: 30rpx;
    }
    .time {
      color: #999;
    }
  }
  .head_img {
    width: 690rpx;
    height: 400rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .parse {
    margin-top: 48rpx;
  }
}
</style>
